<script setup lang="ts">
import { computed } from 'vue';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface TestResult {
  id: string;
  testItemId: string;
  testItemName: string;
  result: string;
  unit: string;
  reference: string;
  abnormal: boolean;
  status: 'completed' | 'pending';
  createTime: string;
  completeTime?: string;
}

interface Props {
  visible: boolean;
  result: null | TestResult;
}

interface Emits {
  (e: 'update:visible',visible: boolean): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 计算属性
const result = computed(() => props.result);

// 方法
const getTestMethod = () => {
  if (!result.value) return '';

  const methodMap: Record<string, string> = {
    血常规: '全自动血细胞分析仪法',
    血糖: '葡萄糖氧化酶法',
    肝功能: '酶法',
    肾功能: '酶法',
    血气分析: '血气分析仪法',
    尿常规: '干化学法',
  };

  return methodMap[result.value.testItemName] || '标准检验方法';
};

const getSampleType = () => {
  if (!result.value) return '';

  const sampleMap: Record<string, string> = {
    血常规: '静脉血',
    血糖: '静脉血',
    肝功能: '静脉血',
    肾功能: '静脉血',
    血气分析: '动脉血',
    尿常规: '晨尿',
  };

  return sampleMap[result.value.testItemName] || '血液';
};

const getClinicalSignificance = () => {
  if (!result.value) return '';

  const significanceMap: Record<string, string> = {
    血常规: '反映机体造血功能和免疫状态',
    血糖: '反映机体糖代谢状况',
    肝功能: '反映肝脏功能状态',
    肾功能: '反映肾脏功能状态',
    血气分析: '反映机体酸碱平衡和氧合状态',
    尿常规: '反映泌尿系统功能状态',
  };

  return significanceMap[result.value.testItemName] || '临床诊断参考';
};

const getTechnician = () => {
  const technicians = ['李技师', '张技师', '王技师', '刘技师'];
  return technicians[Math.floor(Math.random() * technicians.length)];
};

const getClinicalSuggestion = () => {
  if (!result.value) return '';

  return result.value.abnormal
    ? '建议进一步检查，密切观察病情变化，必要时复查。'
    : '检验结果正常，建议定期复查。';result.value.abnormalresult.value.abnormal
};

const getPrecautions = () => {
  if (!result.value) return '';

  const precautionsMap: Record<string, string> = {
    血常规: '空腹采血，避免剧烈运动',
    血糖: '空腹8-12小时，避免剧烈运动',
    肝功能: '空腹采血，避免饮酒',
    肾功能: '空腹采血，避免高蛋白饮食',
    血气分析: '动脉采血，避免过度通气',
    尿常规: '晨尿中段，清洁外阴',
  };

  return precautionsMap[result.value.testItemName] || '按医嘱准备';
};

const getFollowUpSuggestion = () => {
  if (!result.value) return '';

  return result.value.abnormal
    ? '建议1-2周后复查，必要时进一步检查。'
    : '建议3-6个月后复查。';result.value.abnormalresult.value.abnormal
};

const getReportNumber = () => {
  return `RPT${dayjs().format(
    'YYYYMMDD',
  )}${String(Math.floor(Math.random() * 1000)).padStart(3, '0')}`;
};

const printResult = () => {
  message.success('打印功能已触发');
};

const exportResult = () => {
  message.success('导出功能已触发');
};

const handleCancel = () => {
  emit('update:visible', false);
};
</script>

<template>
  <a-modal
    :visible="visible"
    title="检验结果详情"
    width="900px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div v-if="result" class="result-detail-modal">
      <!-- 结果概览 -->
      <div class="overview-section">
        <div class="overview-header">
          <h3>检验结果概览</h3>
          <div class="overview-actions">
            <a-button type="default" size="small" @click="printResult">
              🖨️ 打印
            </a-button>
            <a-button type="primary" size="small" @click="exportResult">
              📄 导出
            </a-button>
          </div>
        </div>

        <div class="overview-content">
          <div class="result-card">
            <div class="result-header">
              <div class="result-title">{{ result.testItemName }}</div>
              <div class="result-status">
                <a-tag
                  :color="result.status === 'completed' ? 'green' : 'orange'"
                >
                  {{ result.status === 'completed' ? '已出报告' : '未出报告' }}
                </a-tag>
              </div>
            </div>

            <div class="result-details">
              <div class="detail-item">
                <span class="label">检验结果：</span>
                <span class="value" :class="{ abnormal: result.abnormal }">
                  {{ result.result }}
                  <span v-if="result.unit" class="unit">{{ result.unit }}</span>
                </span>
              </div>
              <div class="detail-item">
                <span class="label">参考范围：</span>
                <span class="value">{{ result.reference }}</span>
              </div>
              <div class="detail-item">
                <span class="label">结果状态：</span>
                <span class="value">
                  <a-tag :color="result.abnormal ? 'red' : 'green'">
                    {{ result.abnormal ? '异常' : '正常' }}
                  </a-tag>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 详细报告 -->
      <div class="report-section">
        <h3>详细报告</h3>
        <div class="report-content">
          <div class="report-item">
            <div class="report-label">检验项目</div>
            <div class="report-value">{{ result.testItemName }}</div>
          </div>
          <div class="report-item">
            <div class="report-label">检验方法</div>
            <div class="report-value">{{ getTestMethod() }}</div>
          </div>
          <div class="report-item">
            <div class="report-label">样本类型</div>
            <div class="report-value">{{ getSampleType() }}</div>
          </div>
          <div class="report-item">
            <div class="report-label">检验结果</div>
            <div class="report-value" :class="{ abnormal: result.abnormal }">
              {{ result.result }} {{ result.unit }}
            </div>
          </div>
          <div class="report-item">
            <div class="report-label">参考范围</div>
            <div class="report-value">{{ result.reference }}</div>
          </div>
          <div class="report-item">
            <div class="report-label">临床意义</div>
            <div class="report-value">{{ getClinicalSignificance() }}</div>
          </div>
          <div class="report-item">
            <div class="report-label">检验时间</div>
            <div class="report-value">
              {{ result.completeTime || result.createTime }}
            </div>
          </div>
          <div class="report-item">
            <div class="report-label">检验医师</div>
            <div class="report-value">{{ getTechnician() }}</div>
          </div>
        </div>
      </div>

      <!-- 趋势分析 -->
      <div class="trend-section">
        <h3>趋势分析</h3>
        <div class="trend-content">
          <div class="trend-chart">
            <div class="chart-placeholder">
              <div class="chart-icon">📊</div>
              <div class="chart-text">趋势图表</div>
              <div class="chart-description">显示历史检验结果趋势</div>
            </div>
          </div>
          <div class="trend-data">
            <div class="trend-item">
              <span class="trend-label">最近检验：</span>
              <span class="trend-value"
                >{{ result.result }} {{ result.unit }}</span
              >
            </div>
            <div class="trend-item">
              <span class="trend-label">上次检验：</span>
              <span class="trend-value">5.1 mmol/L</span>
            </div>
            <div class="trend-item">
              <span class="trend-label">变化趋势：</span>
              <span class="trend-value">
                <a-tag color="blue">↑ 上升</a-tag>
              </span>
            </div>
          </div>
        </div>
      </div>

      <!-- 建议和备注 -->
      <div class="suggestion-section">
        <h3>建议和备注</h3>
        <div class="suggestion-content">
          <div class="suggestion-item">
            <div class="suggestion-label">临床建议</div>
            <div class="suggestion-value">{{ getClinicalSuggestion() }}</div>
          </div>
          <div class="suggestion-item">
            <div class="suggestion-label">注意事项</div>
            <div class="suggestion-value">{{ getPrecautions() }}</div>
          </div>
          <div class="suggestion-item">
            <div class="suggestion-label">复查建议</div>
            <div class="suggestion-value">{{ getFollowUpSuggestion() }}</div>
          </div>
        </div>
      </div>

      <!-- 报告信息 -->
      <div class="report-info">
        <div class="info-item">
          <span class="label">报告编号：</span>
          <span class="value">{{ getReportNumber() }}</span>
        </div>
        <div class="info-item">
          <span class="label">生成时间：</span>
          <span class="value">{{ dayjs().format('YYYY-MM-DD HH:mm:ss') }}</span>
        </div>
        <div class="info-item">
          <span class="label">审核医师：</span>
          <span class="value">王主任</span>
        </div>
      </div>
    </div>

    <div v-else class="empty-state">
      <div class="empty-icon">📋</div>
      <div class="empty-text">未选择检验结果</div>
    </div>
  </a-modal>
</template>

<style scoped>
.result-detail-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview-section,
.report-section,
.trend-section,
.suggestion-section {
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.overview-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.overview-actions {
  display: flex;
  gap: 8px;
}

.result-card {
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.result-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.result-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.result-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
}

.detail-item .label {
  width: 100px;
  font-size: 14px;
  color: #666;
}

.detail-item .value {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.detail-item .value.abnormal {
  color: #ff4d4f;
}

.detail-item .unit {
  margin-left: 4px;
  font-weight: normal;
  color: #666;
}

.report-section h3,
.trend-section h3,
.suggestion-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.report-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.report-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-label {
  font-size: 12px;
  color: #666;
}

.report-value {
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.report-value.abnormal {
  color: #ff4d4f;
}

.trend-content {
  display: flex;
  gap: 24px;
}

.trend-chart {
  flex: 1;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #999;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
}

.chart-icon {
  margin-bottom: 8px;
  font-size: 48px;
}

.chart-text {
  margin-bottom: 4px;
  font-size: 16px;
}

.chart-description {
  font-size: 12px;
}

.trend-data {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.trend-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.trend-label {
  width: 80px;
  font-size: 14px;
  color: #666;
}

.trend-value {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.suggestion-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.suggestion-label {
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.suggestion-value {
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #333;
  background: #f5f5f5;
  border-radius: 4px;
}

.report-info {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  background: #fafafa;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.info-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.info-item .label {
  font-size: 12px;
  color: #666;
}

.info-item .value {
  font-size: 12px;
  font-weight: bold;
  color: #333;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  color: #999;
}

.empty-icon {
  margin-bottom: 16px;
  font-size: 48px;
}

.empty-text {
  font-size: 14px;
}
</style>
